<template>
	<view class="chat-page">
		<scroll-view
			@scrolltoupper ="scrolltoupper"
			@scroll	='scrollEle'
		    :scroll-into-view="scrollToView"
			:scroll-anchoring="true"
		    scroll-y="true"
			:scroll-top="scrollTop"
			:upper-threshold="50"
			class="msg-list"
			 ref="listW"
			:style="{height: (windosHeight - 52 - 14 - 14 - 28) + 'px'}">
			<view class="list-wrap" ref='wrap'>
				<view
					class="list"
					:class="item.isId == 0 ? 'send' :'receive'"
					v-for="(item,index) in chatList"
					:key='index'
					:id="'list_' + index"
				>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {chatRecords} from "@/api/more.js"
	export default {
		props:{
			chatData:{
				type:Array,
				default:() => []
			}
		},
		data() {
			return {
				queryData: {
					page: 1,
					limit: 10,
					timeZone: 8
				},
				chatList:[],
				total:0,
				scrollHeight:0,
				scrollTop: 0,
				scrollToView:"",
				windosHeight:"" //可使用窗口高度(不包含NavigationBar和TabBar的高度)
			};
		},
		
		mounted() {
			this.queryData.timeZone = this.UTILS.getTimeZone();
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
			this.getChatRecords();
		},

		methods: {
			// 触底加载更多
			scrolltoupper(){
				console.log("000")
				if (this.total > this.chatList.length) {
					this.queryData.page++;
					this.getChatRecords();
				}
			},
			
			scrollEle(){
				const scrollTop = this.$refs.listW.$el.scrollTop;
				const wrapTop = this.$refs.wrap.$el.scrollTop;
				console.log(scrollTop,wrapTop,"88888")
			},
			
			getChatRecords() {
				chatRecords(this.queryData).then(res => {
					if (res.code == 0) {
						this.chatList = res?.data.concat(this.chatList) || [];
						this.total = res.count;
						if(this.queryData.page == 1){
							this.$nextTick(() => {
								this.scrollToView = 'list_' + (this.chatList.length - 1)
							})
						}
						else{
							// this.$nextTick(async () => {
							// 	const query = uni.createSelectorQuery().in(this)
							// 	query
							// 		.select('.list-wrap')
							// 		.boundingClientRect(data => {
							// 			// data.height 为已经渲染的聊天列表内容高度
							// 			// this.scrollHeight 为上一次聊天列表内容高度, 如果当前为第一次, 那么this.scrollHeight应该为0
							// 			// 设置滚动条的高度
							// 			this.scrollTop = data.height - this.scrollHeight
							// 			// (注意: 如果在模板中, upper-threshold设置的值不为0, 为50, 那么可以加上该值), 如:
							// 			// this.scrollTop = data.height - this.scrollHeight + 50
							// 			// 将本次列表渲染后的内容高度记录下来, 方便下次加载时使用
							// 			this.scrollHeight = data.height
							// 			console.log(this.scrollTop,"99999")
							// 		})
							// 		.exec()
							// })
							this.$nextTick(() => {
								this.scrollToView = 'list_' + (this.chatList.length - 1)
							})
						}
						
						
					} else {
						this.UTILS.logStr(res.msg || "获取消息失败")
					}
				})
			}
		},
		watch:{
			chatData: {
			    handler(newVal, oldVal) {
					if(newVal?.length){
						this.chatList = this.chatList?.concat(newVal) || [];
						this.$nextTick(() => {
							this.scrollToView = 'list_' + (this.chatList.length - 1)
						})
					}
			    },
			    immediate: true,
				deep: true 
			}
		}
	};
</script>

<style scoped lang="scss">
	.chat-page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: calc(100% - 52px - 14px - 14px);
		padding: 28rpx 32rpx;
		.list-wrap{
			// transform: rotate(180deg);
			// height: 100%;
			.list{
				// transform: rotate(180deg);
			}
			.list:not(:last-child){
				margin-bottom: 50rpx;
			}
			.text{
				padding: 24rpx;
				line-height: 32rpx;
				word-break: break-all; 
				overflow-wrap: break-word;
				max-width: 90%;
			}
			.receive {
				display: flex;
				justify-content: flex-start;
				.text{
					background-color: #b0b1bf24;
					border-radius: 24rpx 24rpx 24rpx 0rpx;
				}
			}
			.send {
				display: flex;
				justify-content: flex-end;
				.text{
					background-color: #1a7b99;
					border-radius: 24rpx 24rpx 0rpx 24rpx;
					color: #ffffff;
				}
			}
			.image-wrapper {
				padding: 24rpx;
				background-color: #b0b1bf24;
				border-radius: 24rpx 24rpx 24rpx 0rpx;
				backdrop-filter: blur(13.8rpx);
				.image_5 {
					width: 94rpx;
					height: 12rpx;
				}
			}
		}
	}
</style>